package com.sddnytsh.body_buildingsystem.screens

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.icons.filled.LocationOn
import androidx.compose.material.icons.filled.Phone
import androidx.compose.material.icons.filled.Share
import androidx.compose.material.icons.filled.ThumbUp
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SegmentedButtonDefaults.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import com.sddnytsh.body_buildingsystem.R

@Composable
fun AboutScreen(navController: NavController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(56.dp)
        ) {
            // 返回按钮
            IconButton(
                onClick = { navController.popBackStack() },
                modifier = Modifier
                    .align(Alignment.CenterStart)
                    .padding(start = 8.dp)
            ) {
                Icon(
                    imageVector = Icons.Default.ArrowBack,
                    contentDescription = "返回",
                )
            }

            // 标题
            Text(
                text = "关于我们",
                color = Color.White,
                modifier = Modifier.align(Alignment.Center)
            )
        }

        // 内容区域
        LazyColumn(
            modifier = Modifier
                .weight(1f)
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(24.dp)
        ) {
            item {
                // 应用图标和名称
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text(
                        text = "健身管理系统",
                    )
                    Text(
                        text = "版本 1.0.0",
                        style = MaterialTheme.typography.bodyMedium,
                        color = Color.Gray
                    )
                }
            }

            item {
                // 功能介绍
                Column {
                    Text(
                        text = "功能介绍",
                        modifier = Modifier.padding(bottom = 8.dp)
                    )
                    FeatureItem(
                        icon = Icons.Filled.AccountCircle,
                        title = "运动记录",
                        description = "记录您的日常运动数据，包括跑步、健身等各类运动"
                    )
                    FeatureItem(
                        icon = Icons.Filled.FavoriteBorder,
                        title = "健康监测",
                        description = "实时监测心率、卡路里消耗等健康指标"
                    )
                    FeatureItem(
                        icon = Icons.Filled.ThumbUp,
                        title = "数据分析",
                        description = "生成详细的运动报告和数据分析图表"
                    )
                    FeatureItem(
                        icon = Icons.Filled.Share,
                        title = "社区互动",
                        description = "与其他健身爱好者交流经验，分享成果"
                    )
                }
            }

            item {
                // 开发团队
                Column {
                    Text(
                        text = "开发团队",
                        modifier = Modifier.padding(bottom = 8.dp)
                    )
                    TeamMemberItem(
                        name = "张三",
                        role = "前端开发工程师",
                        description = "负责移动端界面设计与实现"
                    )
                    TeamMemberItem(
                        name = "李四",
                        role = "后端开发工程师",
                        description = "负责服务器架构与API开发"
                    )
                    TeamMemberItem(
                        name = "王五",
                        role = "产品经理",
                        description = "负责产品规划与需求分析"
                    )
                }
            }

            item {
                Column {
                    Text(
                        text = "联系我们",
                        modifier = Modifier.padding(bottom = 8.dp)
                    )
                    ContactItem(
                        icon = Icons.Filled.Email,
                        text = "support@fitness.com"
                    )
                    ContactItem(
                        icon = Icons.Filled.Phone,
                        text = "+86 400-123-4567"
                    )
                    ContactItem(
                        icon = Icons.Filled.LocationOn,
                        text = "北京市朝阳区科技园区"
                    )
                }
            }

            item {
                // 版权信息
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 24.dp)
                ) {
                    Text(
                        text = "© 2024 健身管理系统",
                        color = Color.Gray
                    )
                    Text(
                        text = "All Rights Reserved",
                        color = Color.LightGray
                    )
                }
            }
        }
    }
}

@Composable
fun FeatureItem(icon: ImageVector, title: String, description: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            imageVector = icon,
            contentDescription = null,
            modifier = Modifier
                .size(24.dp)
                .padding(end = 12.dp)
        )
        Column(modifier = Modifier.weight(1f)) {
            Text(
                text = title,
                style = MaterialTheme.typography.bodyLarge.copy(fontWeight = FontWeight.Medium)
            )
            Text(
                text = description,
                style = MaterialTheme.typography.bodyMedium,
                color = Color.Gray,
                modifier = Modifier.padding(top = 2.dp)
            )
        }
    }
}

@Composable
fun TeamMemberItem(name: String, role: String, description: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 8.dp)
    ) {
        Text(
            text = name,
            style = MaterialTheme.typography.bodyLarge.copy(fontWeight = FontWeight.Medium)
        )
        Text(
            text = role,
            style = MaterialTheme.typography.bodyMedium,
        )
        Text(
            text = description,
            style = MaterialTheme.typography.bodySmall,
            color = Color.Gray,
            modifier = Modifier.padding(top = 2.dp)
        )
    }
}

@Composable
fun ContactItem(icon: ImageVector, text: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 6.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            imageVector = icon,
            contentDescription = null,
            modifier = Modifier
                .size(20.dp)
                .padding(end = 12.dp)
        )
        Text(
            text = text,
            style = MaterialTheme.typography.bodyMedium
        )
    }
}